<!DOCTYPE html>
<html lang="en" xmlns:class="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
</head>
<style>
    .top-title:hover {
        cursor: pointer;
        color: #b31e22 !important;
    }
    .image {
        margin-top: 10px;
        width: 200px;
        height: 200px;
        object-fit: fill;
        display: block;
    }
    .menuList{
        background-color: #efd0d0 !important;
        color: #FFFFFF!important;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    sapn{
        width: 100% !important;
        float: left !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
    }
    .button {
        padding: 0;
        float: right;
    }
</style>
<body>
<div id="app">
    <!--顶部用户导航栏-->
    <template>
        <div style="font-size: 14px;">
            <div style="display: flex;height: 60px;padding: 0 320px;background-color: #f5f5f5;border-radius: 10px">
                <div v-show="visibleAlready" style="margin-top: 3px">
                    <el-col :span="6">
                        <el-avatar style="height: 50px;width:50px;" :src="User.userImg"></el-avatar>
                    </el-col>
                    <el-col :span="18" style="line-height:50px">
                        <span style="padding-right: 30px;line-height: 40px;color: #666;margin-left:30px">{{User.realName}}</span>
                    </el-col>
                </div>
                <div v-show="visibleNotYet" style="margin-top: 10px">
                    <span style="padding-right: 20px;line-height: 40px;color: #666;">欢迎光临淘书网,请</span>
                    <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpLogin">登录</el-button>
                    <span style="padding-right: 20px;line-height: 40px;">|</span>
                    <el-button type="text" style="color: #666" class="top-title" @click="jumpRegister">注册</el-button>
                </div>
                <div style="flex: 1;display: flex;">
                    <div style="flex: 0.75;"></div>
                    <div style="width: 300px;display: flex;">
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpPersonalCenter"> <i class="el-icon-user"></i>个人中心</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpOrders"><i class="el-icon-goods"></i>我的订单</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCollect"><i class="el-icon-star-off"></i>我的收藏</el-button>
                        <el-button type="text" v-show="visibleAlready" style="color: #666;margin-right: 10px;" class="top-title" @click=" killSession"><i class="el-icon-switch-button"></i>退出登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <div style="padding: 0 200px;">
        <div style="height: 50px;background-color: #B3C0D1;display: flex; align-items: center;">
            <el-link :underline="false" type="primary" href="/index.html"><span
                    style="color: white;font-size: 20px;margin-left: 20px;"><icon class="el-icon-s-home"></icon> 返回首页</span>
            </el-link>
        </div>
    </div>
    <template>
        <div style="padding: 0 210px">
            <div style="margin-top: 30px">
            <el-row>
                <el-form ref="searchForm" :inline="true" :model="searchDialog" >
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="书名：">
                                <el-input style="width:180px " v-model="searchDialog.bookName" placeholder="Name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-form-item label="加购时间：">
                        <el-col  :span="8">
                            <el-date-picker type="date" placeholder="最远日期" v-model="searchDialog.startDate" style="width: 100%;"></el-date-picker>
                        </el-col>
                            <el-col class="line" align="center"style="font-size: 20px" :span="2">-</el-col>
                        <el-col :span="8">
                            <el-date-picker placeholder="最近日期" v-model="searchDialog.endDate" style="width: 100%;"></el-date-picker>
                        </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-row style="margin-left: -100px">
                            <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                            <el-button type="success" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
                            </el-row>
                        </el-form-item>
                    </el-row>
                </el-form>

            </el-row>
            </div>
            <el-row>
                <el-col :span="8" v-for="item in dataList" :key="book.id">
                    <el-card :body-style="{ padding: '0px',width:'400px'}" shadow="hover" style="margin-left: 20px;margin-top: 10px;cursor: pointer;"
                             class="card"
                             @click.native ="jumpBookDetails(item.bookId)">
                        <el-row>
                            <el-col :span="12">
                                <img :src="item.bookImg" class="image">
                            </el-col>
                            <el-col :span="12">
                                <div style="margin-top: 30px">
                                    <div style="display:flex;">
                                        <p style="flex: 0 0 65%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 18px">{{ item.bookName }}</p>
                                    </div>
                                    <span style="font-size: 10px;color: #666;">{{collect}}收藏</span>
                                </div>
                                <div style="white-space:nowrap;">
                                    <p style="float: left;color: #fe6144;font-size: 20px;margin-top: 60px"> ¥{{ (item.bookPrice).toFixed(2) }}</p>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <br>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </div>
    </template>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/request.js"></script>
<<script>
    new Vue({
        el: '#app',
        created() {
            //钩子函数，vue对象初始化后执行
            this.getUser();
        },
        mounted() {
            this.showCollect();
        },
        methods: {
            //显示所有购物项
            showCollect(){
                var _this=this;
                axios({
                    method:"post",
                    url:"/collect/page?currentPage="
                    + this.currentPage + "&pageSize=" + this.pageSize,
                    data:_this.searchDialog
                }).then(resp =>{
                    _this.dataList = resp.data.items;
                    console.log( _this.dataList)
                    //设置表格总记录数
                    _this.totalCount = resp.data.totalCount;
                })
            },

            jumpBookDetails(id) {
                window.open("/user_page/bookDetails.html?id=" + id);
            },
            handleSelectionChange(val){
                this.totalPrice=0;
                this.multipleSelection=val;
                console.log(this.multipleSelection);
                val.forEach(item=> {
                    if (val && val.length) {
                        console.log(item.quantity)
                        console.log(item.bookPrice)
                        this.totalPrice += item.quantity * item.bookPrice;
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.showCollect();
                // console.log(`每页 ${val} 条`);
            },
            //当前页数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.showCollect();
                // console.log(`当前页: ${val}`);
            },

            onSubmit() {
                this.currentPage = 1;//每次查询回到页码到第一页
                this.showCollect();
            },
            resetSearch() {
                this.searchDialog = {
                    bookName: undefined,
                }
                this.showCollect();
            },
            getRowKey(row) {
                return row.id;
            },
            getUser() {//获取用户名
                //发送ajax请求
                axios({
                    method:"get",
                    url:"/user",
                }).then(resp =>{
                    this.User = resp.data;
                    if (this.User !== null && this.User !== ""&& this.User !==undefined) {
                        this.visibleNotYet = false;
                        this.visibleAlready= true;
                    }else{this.User={username:null}}
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.visibleNotYet = true;
                    this.visibleAlready = false;
                    //发送ajax请求
                    axios.post("/user/logout").then((res) => {

                    })
                    window.location.href = "../index.html"
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //商品下架或库存小于数量时失效
            checkSelectable(row) {
                if (row.status == '-1'||row.inventory<0){
                    return false;
                }
                return true;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                this.$refs.menus.open(keyPath);
            },
            jumpConfirmAddress(ordersId){
                window.location.href = "confirmAddress.html?ordersId=" + ordersId;
            },
            jumpAllBook(){
                location.href ="/user_page/allBook.html";
            },
            jumpIndex(){
                location.href ="/index.html";
            },
            jumpLogin(){
                location.href ="/login_page/login.html";
            },
            jumpRegister(){
                location.href ="/login_page/register.html";
            },
            jumpCollect(){
                location.href ="/user_page/collect.html";
            },
            jumpPersonalCenter(){
                location.href ="/user_page/personCenter.html";
            },
            jumpCart(){
                location.href ="/user_page/cart.html";
            },
            jumpOrders(){
                location.href ="/user_page/orders.html";
            }
        },
        data() {
            return {
                User:[],//用户信息
                visibleNotYet:true,
                visibleAlready:false,
                pageSize:6,
                totalCount:100,
                currentPage:1,
                selectIds:[],
                //已选总价
                totalPrice:0,
                cart:{ quantity:1 },
                popShow: false,
                dataList:[],
                searchDialog:{
                },
                book:{
                    id:'',
                    bookName:'',
                    author:'',
                    bookImg:'',
                    bookPrice:'',
                    inventory:'',
                    introduction:'',
                    addTime:''
                },
            }
        }
    })
</script>
</html>